<script setup lang="ts">
//@ts-ignore
import type{ HanFuTypeVo,HanFuTypeQuery} from "@/apis/hanfu/hanfuType";
import {useUserStore} from "@/stores/modules/user"
import {ref,type Ref} from "vue";
import {
  addHanfuType,
  deleteHanfuType,
  getHanfuTypeById,
  getHanfuTypeListByCondition,
  updateHanfuType
} from "@/apis/hanfu/hanfuType";
import { Notification } from '@arco-design/web-vue';


const title = ref('')

/**
 * add
 * up
 * */
const api = ref('')

/**
 * 查询类
 * */
const hanFuTypeQuery = reactive({
  hanFuTypeId:null,
  hanFuTypeName:null,
  hanFuTypeStatus:null,
  pageNum:1,
  updataBy:null,
  pageSize:20,
  total : 0
})

/**
 * 汉服类型
 * */
const hanfuType = reactive({
  hanfuTypeId:null,
  hanfuTypeName:null,
  updataBy:useUserStore().userInfo.id,
  status:null,
})

/**
 *
 * */


/**
 * 汉服默认类型
 * */
const scroll = {
  x: 1200,
  y: 650
};


/**
 *
 * */
const visible = ref(false);
const selectList = ref([])
const data:Ref<HanFuTypeVo[]> = ref([])
const scrollbar = ref(true);


/**
 * 新增
 * */
const handleClick = () => {


  title.value = '新增汉服类型'
  api.value = 'add'
  visible.value = true;
};

/**
 * 修改
 * */
const updataClick = (data:any) => {


  title.value = '修改汉服类型'
  api.value = 'up'

  if (data != null && selectList.value.length == 0){
      hanfuType.hanfuTypeId = data.hanfuTypeId
      hanfuType.hanfuTypeName = data.hanfuTypeName
      hanfuType.status = data.status
  }else {
    getHanfuTypeById(selectList.value[0]).then(res => {
      hanfuType.hanfuTypeId = res.data["data"].hanfuTypeId
      hanfuType.hanfuTypeName = res.data["data"].hanfuTypeName
      hanfuType.status = res.data["data"].status

    })
  }

  visible.value = true;
}


/**
 * 新增表单确定按键
 * */
const handleOk = () => {

  if(api.value == 'add'){
    addHanfuType(hanfuType).then(res =>{
      Notification.success({
        title: '新增成功',
        content: 'Update success!',
        duration: 3000,
      })
      getList()
    })
  }else if(api.value == 'up'){

    if (hanfuType.hanfuTypeName == null || hanfuType.status == null){
      Notification.error({
        title: '请输入汉服类型名称和状态',
        content: 'Update error!',
        duration: 3000,
      })
      return
    }

    updateHanfuType(hanfuType).then(res =>{
      Notification.success({
        title: '修改成功',
        content: 'Update success!',
        duration: 3000,
      })
      selectList.value = []
      getList()
    })



  }



}
/**
 * 新增表单取消按键
 * */
const handleCancel = () => {

  visible.value = false;

}

/**
 * 获得汉服类型列表
 * */
const getList = () => {
   getHanfuTypeListByCondition(hanFuTypeQuery).then(res => {
     data.value = res.data["data"].records
     hanFuTypeQuery.total = res.data["data"].total
  })
}

/**
 * 删除汉服按钮
 **/

const delData = (data:any) => {

  if (data != null && data.hanfuTypeId != null ){

    deleteHanfuType([data.hanfuTypeId]).then(res => {

      Notification.success({
        title: '删除成功',
        content: 'Update success!',
        duration: 3000,
      })
      selectList.value = []
      getList()
    })

  }else {
    deleteHanfuType(selectList.value).then(res => {

      Notification.success({
        title: '删除成功',
        content: 'Update success!',
        duration: 3000,
      })
      selectList.value = []
      getList()
    })
  }

}

getList()

</script>


<template>
  <div class="main">
    <a-space direction="vertical" :size="16" class="grid">

      <a-row justify="start" :gutter="12">
        <a-col :span="2" ><a-input v-model="hanFuTypeQuery.hanFuTypeId " placeholder="汉服类型编号" /></a-col>
        <a-col :span="2" ><a-input v-model="hanFuTypeQuery.hanFuTypeName" placeholder="汉服类型名称" /></a-col>
        <a-col :span="2" class="row">
          <a-select v-model="hanFuTypeQuery.hanFuTypeStatus" placeholder="请选择状态" allow-clear>
            <a-option :value="1">上架</a-option>
            <a-option :value="0">下架</a-option>
          </a-select>
        </a-col>
        <a-col :span="1" class="row"><a-button type="outline" @click="getList" >查询</a-button></a-col>
      </a-row>

      <a-row justify="start">
        <a-space size="small">
          <a-col :span="1"><a-button type="primary" @click="handleClick" >新增</a-button></a-col>
          <a-col :span="1"><a-button type="outline" status="danger" :disabled="selectList.length == 0" @click="delData">删除</a-button></a-col>
        </a-space>
      </a-row>

      <a-table :data="data" row-key="hanfuTypeId" :row-selection="selectList"
               :scroll="scroll" :scrollbar="scrollbar"
               v-model:selectedKeys="selectList" :pagination="false"
               style="background-color: white;">
        <template #columns>
          <a-table-column title="编号" data-index="hanfuTypeId"></a-table-column>
          <a-table-column ellipsis="true" title="名称" data-index="hanfuTypeName"></a-table-column>
          <a-table-column title="状态" data-index="status">
            <template #cell="{record}">
              <a-tag v-if="record.status == 1" color="green">上架</a-tag>
              <a-tag v-if="record.status == 0" color="red">下架</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="上传者" data-index="updataBy"></a-table-column>
          <a-table-column title="上传时间" data-index="updataTime"></a-table-column>
          <a-table-column title="操作">
            <template #cell="{record}">
              <a-button type="text" @click="updataClick(record)">修改</a-button>
              <a-button type="text" @click="delData(record)" status="danger">删除</a-button>
            </template>
          </a-table-column>
        </template>

        <template #footer>
          <a-pagination v-model:current="hanFuTypeQuery.pageNum" :total="hanFuTypeQuery.total"
                        v-model:page-size="hanFuTypeQuery.pageSize" @page-size-change="getList"
                        @change="getList"
                        show-total show-jumper show-page-size/>
        </template>
      </a-table>




    </a-space>
    <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel">
      <template #title>
        {{ title }}
      </template>
      <a-form :model="hanfuType">
        <a-form-item field="name" label="汉服类型名称">
          <a-input
              v-model="hanfuType.hanfuTypeName"
              placeholder="请输入汉服类型名称..."
          />
        </a-form-item>
        <a-form-item field="status" label="汉服状态">
          <a-select v-model="hanfuType.status" placeholder="请选择状态">
            <a-option :value="1">上架</a-option>
            <a-option :value="0">下架</a-option>
          </a-select>
        </a-form-item>

      </a-form>

    </a-modal>
  </div>

</template>



<style lang="scss" scoped>
.grid {
  .row {
    margin: 0 10px;
  }
  margin: 10px;
  padding: 10px;
  background-color: white;
}
</style>